<template>
    <div>
        <!-- 标题 -->
        <van-nav-bar  title="个人信息编辑" left-arrow @click-left='$router.push("/personal")'>
        <template #right>
            <van-icon name="wap-home-o" size="18" @click='$router.push("/index")' />
        </template>
        </van-nav-bar>
        <!-- 头像 -->
        <div class="head_img">
            <img :src='userInfo.head_img || "http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpghttp://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg"' alt="">
            <van-uploader  accept="image/*" :after-read="afterRead"/>
        </div>
        <!-- 昵称 、密码、性别 -->
        <!-- 给单元格绑定点击事件控制弹窗显示隐藏 -->
        <van-cell title="昵称" is-link :value="userInfo.nickname" @click="nicknameDialog"/>

        <!-- v-model="nicknameShow" 控制弹窗的显示隐藏 -->
        <van-dialog v-model="nicknameShow" title="标题" show-cancel-button @confirm='confirmNickname' :beforeClose='nicknameBeforeClose'>
          <!-- input框 -->
            <van-field v-model="nickname" label="昵称" name="昵称" placeholder="昵称" />
        </van-dialog>

        <!-- 今日作业 -->
        <van-cell title="密码" is-link value="***" @click="passwordDialog" />

        <van-dialog v-model="passwordShow" title="修改密码" show-cancel-button @confirm='confirmPassword' :beforeClose='passwordBeforeClose'>

          <!-- input框 -->
          <keep-alive>
            <van-field v-model="oldpsd" label="旧密码" name="旧密码" placeholder="旧密码" required disabled/>
          </keep-alive>
            <van-field v-model="newpsd" label="新密码" name="新密码" placeholder="新密码" required />
          
        </van-dialog>




        <van-cell title="性别" is-link :value="userInfo.gender ? '男':'女' " @click="genderS"/>
        <!-- 
          弹窗男女选择
          v-model="genderShow" 弹窗的显示和隐藏
          :actions="actions" 选项卡
           @select="onSelect" 选择事件
        -->
        <van-action-sheet v-model="genderShow" :actions="actions" @select="onSelect" />



    </div>
</template>


<script>
import {personal,upload,user_update} from '@/apis/user'
import axios from '@/utils/request.js'
export default {
  data(){
    return{
      id:localStorage.getItem('heima-id'),
      userInfo:{},
      nicknameShow:false,
      passwordShow:false,
      nickname:'',
      genderShow:false,
      actions: [{ name: '女' }, { name: '男' }],
      oldpsd:'',
      newpsd:'',
    }
  },
  created(){
    let id = localStorage.getItem('heima-id')
    personal(id).then(res=>{
      console.log(33,res);
      this.userInfo = res.data.data
    })
  },
  methods:{
    async afterRead(data){
      console.log(40,data);
      //上传文件需要传formdata格式对象给后台
      let formdata = new FormData()
      formdata.append('file',data.file)
      let id = localStorage.getItem('heima-id')
      // upload(formdata,token).then(res=>{
      //   console.log(46,res);
      // })
    // async await可以把异步的方法变成类似同步 await后面的函数必须完成了才往下执行
    let res = await upload(formdata)
    console.log(50,res);
    user_update(id,{
      head_img: axios.defaults.baseURL + res.data.data.url
    }).then(res=>{
      console.log(56,res);
      this.userInfo.head_img = res.data.data.head_img 
    })
    },
    nicknameDialog(){
      this.nicknameShow = true
      this.nickname = this.userInfo.nickname
    },
    //弹窗关闭前回调函数
    nicknameBeforeClose(action, done){
      //action表示的是弹窗按钮cancel或者confirm
      // done() 后关闭弹窗  done(false) 阻止弹窗关闭
      if(action==='cancel'){done();return}
      if(this.nickname.length>1 &&this.nickname.length<10){
        done()
      }else{
        done(false)
      }

    },
    confirmNickname(){
      //昵称必须1-10位
      if(this.nickname.length>1 &&this.nickname.length<10){
        user_update(this.id,{
          nickname: this.nickname
        }).then(res=>{
          console.log(77,res);
          this.userInfo.nickname = res.data.data.nickname
        })
      }else{
        this.$toast.fail('昵称输入不合法')
        //输入不合法时候，通过弹窗关闭事件控制是否关闭弹窗
      }

    },
    genderS(){
      this.genderShow = true
    },
    onSelect(action,index){
      console.log(117,action,index);
      user_update(this.id,{
        gender:index
      }).then(res=>{
        console.log(124,res);
        this.userInfo.gender =res.data.data.gender
        this.genderShow = false
      })
    },
    passwordDialog(){
      this.passwordShow = true
      console.log(this.userInfo);
      this.oldpsd = this.userInfo.password
      this.newpsd=''
    },
    confirmPassword(){
      if(this.newpsd ===this.oldpsd){this.$toast.fail('修改的密码不能和原始密码一致');return}
      if(this.newpsd.length>1&&this.newpsd.length<10){
        user_update(this.id,{
          password: this.newpsd
        }).then(res=>{
          console.log(149,res);
          this.userInfo.password = this.newpsd
        })
      }else{
        this.$toast.fail('密码输入不合法')
      }
    },
    passwordBeforeClose(action, done){
      if(action==='cancel'){done();return}
      if(this.newpsd.length>1 &&this.newpsd.length<10 &&this.newpsd !==this.oldpsd){
        done()
      }else{
        done(false)
      }
    },
  }
}
</script>


<style lang="less" scoped>
// less 样式穿透 /deep/
/deep/.van-nav-bar{
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid #ccc;
    div{
        height: 100%;
    }
}
.head_img{
    text-align: center;
    margin: 15px 0;
    img{
        width: 30%;
    }
    /deep/.van-uploader{
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    .van-uploader__upload{
        width: 100%;
        input{
            width: 100%;
        }
    }
    }
}
</style>